<script setup>
import { onMounted, ref } from 'vue'
import {
  deleteProjectAPi,
  getProjectListApi,
  saveProjectAPi,
  updateProjectAPi
} from '@/api/project.js'
import { ElMessage } from 'element-plus'

const list = ref([])
// 分页参数
const total = ref(0)
const pageParams = {
  page: 1,
  limit: 10
}
const queryDto = ref({
  keyword: ''
})

const fetchData = async () => {
  const response = await getProjectListApi(
    pageParams.page,
    pageParams.limit,
    queryDto
  )
  list.value = response.data.records
  total.value = response.data.total
}
onMounted(() => {
  fetchData()
})
// 验证规则
const rules = {
  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  projectCode: [{ required: true, message: '请输入项目编码', trigger: 'blur' }]
}

// 表单引用
const form = ref()

// 添加
const dialogVisible = ref(false)
const addShow = () => {
  dialogVisible.value = true
  resetForm()
}
// 基础数据模型
const defaultForm = {
  id: '',
  projectName: '',
  projectCode: '',
  description: ''
}
const project = ref(defaultForm)
// 重置project
const resetForm = () => {
  project.value = { ...defaultForm }
}

const submit = async () => {
  await form.value.validate()
  // 验证通过，执行提交逻辑
  // 需要区分新增还是编辑，id无值是新增，有值是编辑
  //!project.value.id 用于检查 project.value.id 的值是否为假值（falsy value）。
  // 在 JavaScript 中，假值包括 undefined、null、0、NaN、''（空字符串）、和 false。如果 project.value.id 是这些值中的任何一个，!project.value.id 表达式将返回 true。
  if (!project.value.id) {
    await saveProjectAPi(project.value)
    ElMessage.success('新增成功')
  } else {
    await updateProjectAPi(project.value)
    ElMessage.success('编辑成功')
  }
  resetForm()
  //   弹窗关闭
  dialogVisible.value = false
  // 清空默认值
  fetchData()
}

// 编辑
const editProjectShow = (row) => {
  project.value = { ...row }
  dialogVisible.value = true
}

const deleteProject = async (row) => {
  project.value = { ...row }
  await deleteProjectAPi(project.value.id)
  ElMessage.success('删除成功')
  resetForm()
  fetchData()
}

// 删除
</script>
<template>
  <!---搜索表单-->
  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>

  <!---数据表格-->
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="projectName" label="项目名称" />
    <el-table-column prop="projectCode" label="项目编码" />
    <el-table-column prop="description" label="描述" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" align="center" width="280" #default="scope">
      <el-button
        type="primary"
        size="small"
        @click="editProjectShow(scope.row)"
      >
        修改
      </el-button>
      <el-button type="danger" size="small" @click="deleteProject(scope.row)">
        删除
      </el-button>
    </el-table-column>
  </el-table>
  <el-pagination
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.limit"
    @size-change="fetchData"
    @current-change="fetchData"
  />

  <el-dialog v-model="dialogVisible" title="添加或修改" width="40%">
    <el-form label-width="120px" :rules="rules" ref="form" :model="project">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="project.projectName" />
      </el-form-item>
      <el-form-item label="项目编码" prop="projectCode">
        <el-input v-model="project.projectCode" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="project.description" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped></style>
